<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示最新的五条信息</title>
    <style>
        h1 {
            text-align: center;
        }

        .news-list {
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 600px;
            margin: 0 auto;
            padding: 10px;
        }

        .news-list h4 {
            margin: 0 0 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .news-list ul {
            padding: 0;
            margin: 0;
            list-style: none;
            line-height: 2;
        }

        .form {
            margin: 100px auto 0;
            width: 600px;
            text-align: center;
            overflow: hidden;
        }

        .form input {
            float: left;
            width: 480px;
            height: 50px;
            box-sizing: border-box;
            padding: 10px;
        }

        .form button {
            float: left;
            width: 120px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="news-list">
        <h4>最新消息</h4>
        <ul id="newsList">
            <!-- <li><a href="#">1.小明由于调戏女老师再次被滚粗教室</a></li>
                <li><a href="#">2.iPhone10发布,屏幕高度亮瞎了所有小伙伴</a></li>
                <li><a href="#">3.为了弘扬乐于助人的精神，中国人大开会决定授予老王“中国好邻居”称号</a></li> -->
        </ul>
    </div>
    <div class="form">
        <input type="text" id="news"><button id="btnAdd">添加</button>
    </div>

    <script>
        var newLists = [
            '如何看待“诸病”缠身却仍“家底殷实”的美国？',
            '炸毁韩朝联络办已超48小时 金与正身后的金正恩何时发声？',
            '杨洁篪与蓬佩奥夏威夷会谈 7小时对话哪里是最大看点'
        ]

        // 遍历渲染封装
        function render(){
            newsList.innerHTML = newLists.map(function (items, index) {
                return '<li><a href="#">' + (index + 1) + '.' + items + '</a></li>'
            }).join('');
        }
        
        // 初始化
        render();

        // 点击添加
        btnAdd.onclick = function(){
            // 获取新信息后unshift进newLists
            newLists.unshift(news.value);
            // 超过五条时，删除最后一条
            if(newLists.length>5){
                newLists.pop();
            }
            render();
            // 清空输入框
            news.value = '';
        }
    </script>
</body>
</html>